<template>
  <div id="distributionlist" v-cloak> 

    <el-form ref="form" :model="form" label-width="80px">  
        <el-row> 
           <el-col :span="24" style="display:flex;">
                <div class="mytitle_item" style="margin-bottom:20px;">
                    <el-form-item label="分配总值" style="margin-bottom:0px !important;">
                        <el-input v-model.number="all_number" readonly="readonly" class="my_input"></el-input>
                    </el-form-item>
                </div>
            </el-col>
            <el-col :span="24" style="display:flex;">
                <div class="mytitle_item" style="margin-bottom:20px;">
                    <el-form-item label="分配数量" style="margin-bottom:0px !important;">
                        <el-input v-model.number="nums" @change="changea" class="my_input"></el-input>
                    </el-form-item>
                </div>
            </el-col>
            <el-col :span="24" style="display:flex;">
                <div class="mytitle_item"  style="margin-bottom:0px;">
                    <el-form-item :label="variable_name4 + '选择'" style="margin-bottom:0px !important;">
                        <el-select  v-model="form.select_num" placeholder="请选择" class="my_input">
                            <el-option  v-for="(item,index) in select_data" :key="index" 
                            :label="item.title + '-' +'分配范围:'+ parseInt(item.min_price) + '-' + js(item.max_price)" :value="item.maid"></el-option>
                        </el-select>
                    </el-form-item>
                </div>
            </el-col>  
            <el-col :span="24" style="display:flex;margin-top:20px;">
                <div class="mytitle_item"  style="margin-bottom:0px;">
                    <el-form-item label="标的种类" style="margin-bottom:0px !important;">
                        <el-select  v-model="novice_num" placeholder="请选择" class="my_input">
                           <el-option  v-for="(item,index) in novice_data" :key="index" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </div>
            </el-col> 
        </el-row> 
    </el-form>

    <div class="demo" :style="{  height: dtheight + 'px' }">
        <div style="width:100%;"> 
            <el-form ref="form" :model="datalist" label-width="50px" style="width:100%;">
                <div style="width:100%;">
                    <div v-for="(item,index) in datalist.dataarr" :key="index" style="display:flex;float: left;width:calc(100%/4);margin-top:20px;">
                        <el-form-item label="" label-width="0px" style="flex:1;">
                            <el-input v-model.number="item.number" @blur="chage_input" placeholder="请输入数量" ></el-input>
                        </el-form-item>
                            <i  v-if="datalist.dataarr.length-1 == index" class="el-icon-circle-plus tb_class" @click="addItem"></i>
                            <i  v-else class="el-icon-delete-solid tb_class" @click="delectItem(index)"></i>
                    </div>
                    <div style="clear:both;"></div>
                </div>
            </el-form>     
        </div>
    </div> 

    <div style="text-align: center;width:100%;">
            <el-button type="primary" style="width:250px;margin-top:50px;background: #F5CF49;border:none;" @click="qr_but1">确认</el-button>
    </div>

    <el-dialog title="用户验证" :visible.sync="user_test.user_mtk"  width="400px" >
          <el-form ref="form" :model="user_test"  label-width="100px" style="width:100%;">
                <el-form-item label="" label-width="0px">
                    <el-input v-model="user_test.password" placeholder="二级密码" ></el-input>
                </el-form-item>
                <el-form-item label="" label-width="0px" >
                    <div style="display:flex;">
                        <el-input v-model="user_test.phone" placeholder="手机验证码" style="flex:1;"></el-input>
                         <el-button class="code_but1 custom_color_button" type="primary"  @click="getCode_yz()" :disabled="user_test.disabled" style="margin-left:10px;">
                          {{ user_test.codeText }}
                        </el-button>
                    </div>
                </el-form-item>
                <div style="text-align: center;width:50%;margin:auto;margin-top:20px;">
                  <el-button type="primary" class="custom_color_button" style="width:100%;" @click="user_mtk_but">确认</el-button>
                </div>
         </el-form>
    </el-dialog> 


   </div>
</template>

<script>

export default {
   name: 'distributionlist',
   props:{
      distributiondata:{  
        //type:Array,
       default:()=>[]
     },
  },
  data () {
    return {
        dtheight:'500',  //窗口高度
        all_number:0,
        datalist:{
            dataarr:[{"number":0}]
        },
         user_test:{  //用户判定
            user_mtk:false, //用户判定模态狂
            codeText:'获取验证码', //获取验证码字
            totalTime:60,  //获取验证码秒
            disabled:false, //禁用获取验证码
            password:'', //二级密码
            phone:'',  //验证码
        },
        form:{
          select_num:''
        },
        select_data:[],
        nums:0,

        novice_data:[{"id":0,"name":"初始地"},{"id":1,"name":"新手地"}],
        novice_num:0,
    }
  },
   components:{

  },
  created(){
     this.dtheight = window.innerHeight - 500
      this.gz_list()
      this.z_num()
  },
  mounted (){
    
  },
  methods: {
      changea(){
          //console.log(this.nums)
          this.datalist.dataarr = []
          for(let i=1;i<=this.nums;i++){
               this.datalist.dataarr.push({
                number:0
                }) 
          }
      },
      z_num(){
          this.nums = this.datalist.dataarr.length 
      },
      js(number){
           var num = parseInt(number)-1
           return num
      },
     gz_list(){
            this.post("/goods/manorOption", {
             
	        }).then(res => {
                this.select_data = res.result
                console.log(res)
         })
      },
    addItem(){ //增加表单按钮
        this.datalist.dataarr.push({
        number:0
        })  
        this.z_num()
    },
    delectItem(index){ //删除表单按钮
        this.datalist.dataarr.splice(index, 1)
        this.z_num()
    },
    chage_input(){
         let element = 0 
         for (let i = 0; i < this.datalist.dataarr.length; i++) {
               
                element += parseInt(this.datalist.dataarr[i].number);
          }
          this.all_number = element
    },
    qr_but1(){
       this.user_test.user_mtk = true
    },
    user_mtk_but(){

        this.getCode_yz_qr().then(res => {
            console.log(res)
            if(res == 1){
                this.qr_but()
            }
        })
  
    },
    qr_but(){
         
         let select_arr =[]

          for(let item of this.datalist.dataarr){
              select_arr.push(item.number)          
          }
           
           console.log(select_arr)

          this.post("goods/distributeToSomeone", {
                  uid:this.$route.query.id,
                  all_price:this.all_number,
                  select_arr:select_arr,
                  maid:this.form.select_num,
                  novice:this.novice_num,
	      	}).then(res => {  
                  console.log(res)
                   if(res.error_code == 0){
                       this.open1(res.result,'success')  //提示框
                        this.$router.go(-1)
                    }else {
                        this.open1(res.message,'warning')
                    }

          })

    }


  }
}
</script>


<style scoped>
[v-cloak]{
    display: none;
}
.demo{
    overflow-y:auto;
}
.mytitle{
    height: 35px;
}
.mytitle_item{
    display: flex;
    align-items: center;
}
.mytitle_item::before{
  content:'';
  width: 5px;
  height: 15px;
  background: #F5CF49;
  display: block;
}
.tb_class{
    color:#F5CF49;
    font-size:30px;
    margin-top:5px;
    margin-left:15px;
    margin-right:15px;
  }
  .my_input>>>input{
      width: 300px;
  }
</style>